<template>
  <el-dialog :visible.sync="dialogTableVisible" :append-to-body="true" :lock-scroll="false" :title="isEdit?'Edit':'Create'" @close="handleCloseDetailDialog">
    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px" style="margin-left:50px;">

      <!--<el-form-item :label="$t('useraddressfiles.area_id')" prop="area_id" required>-->
      <!--<el-select v-model="postForm.area_id" clearable placeholder="Please Chose" width="600px">-->
      <!--<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"/>-->
      <!--</el-select>-->
      <!--</el-form-item>-->

      <el-form-item :label="$t('table.available')" prop="is_available">
        <el-radio-group v-model="postForm.is_available">
          <el-radio :label="1">Available</el-radio>
          <el-radio :label="0">Unavailable</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('useraddressfiles.gender')" prop="gender">
        <el-radio-group v-model="postForm.gender">
          <el-radio :label="0">unknown</el-radio>
          <el-radio :label="1">male</el-radio>
          <el-radio :label="2">female</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('useraddressfiles.first_name')" prop="first_name" required>
        <el-col :span="20">
          <el-input v-model="postForm.first_name"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('useraddressfiles.last_name')" prop="last_name" required>
        <el-col :span="20">
          <el-input v-model="postForm.last_name"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('useraddressfiles.address')" prop="address" required>
        <el-col :span="20">
          <el-input v-model="postForm.address" :label="$t('table.address')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('useraddressfiles.mobile')" prop="mobile" >
        <el-col :span="20">
          <el-input v-model="postForm.mobile" :label="$t('table.mobile')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('useraddressfiles.email')" prop="email" >
        <el-col :span="20">
          <el-input v-model="postForm.email" :label="$t('table.email')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('useraddressfiles.is_default')" prop="is_default">
        <el-radio-group v-model="postForm.is_default">
          <el-radio :label="0">no</el-radio>
          <el-radio :label="1">yes</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('useraddressfiles.additional_info')" prop="additional_info" >
        <el-col :span="20">
          <el-input v-model="postForm.additional_info" :label="$t('useraddressfiles.additional_info')" type="textarea"/>
        </el-col>
      </el-form-item>

      <el-form-item prop="is_available" >
        <el-col :span="20">
          <el-input v-model="postForm.is_available" :label="$t('useraddressfiles.is_available')" type = "hidden"/>
        </el-col>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDetailDialog">{{ $t('table.cancel') }}</el-button>
      <el-button type="primary" @click="submitForm('postForm')">{{ $t('table.submit') }}</el-button>
    </div>

  </el-dialog>
</template>
<script>

import userAddressApi from '@/api/user/address'
import ScrollPane from '@/components/ScrollPane/index'

const defaultForm = {
  area_id: '',
  first_name: '',
  last_name: '',
  address: '',
  mobile: '',
  email: '',
  gender: 0,
  is_default: 0,
  additional_info: '',
  is_available: 1
}

export default {
  name: 'Detail',
  components: { ScrollPane },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      rules: {
        area_id: [
          { required: true, message: 'area is required', trigger: 'change' }
        ]
      },
      areaList: [],
      imageUrl: '',
      recordid: 0,
      dialogTableVisible: false,
      isEdit: false,
      roleList: [],
      checkedCities: []
    }
  },
  computed: {
    lang() {
      return this.$store.getters.language
    }
  },
  created() {
  },

  mounted() {

  },

  methods: {
    showRecord(id) {
      userAddressApi.showRecord(id).then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.postForm = serviceResponse.data.record
          this.areaList = serviceResponse.data.areaList
        }
      }).catch(err => {
        console.log(err)
      })
    },

    handleCreateRecord() {
      userAddressApi.createRecord().then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.areaList = serviceResponse.data.areaList
        }
      }).catch(err => {
        console.log(err)
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId > 0) {
            userAddressApi.updateRecord(this.editId, this.postForm).then(response => {
              const serviceResponse = response.data
              if (serviceResponse.code === 0) {
                this.$message({
                  type: 'success',
                  message: serviceResponse.msg
                })
                this.handleCloseDetailDialog()
              } else {
                this.$message({
                  type: 'error',
                  message: serviceResponse.msg
                })
              }
            })
          } else {
            userAddressApi.storeRecord(this.postForm).then(response => {
              const serviceResponse = response.data
              if (serviceResponse.code === 0) {
                this.$message({
                  type: 'success',
                  message: serviceResponse.msg
                })
                this.handleCloseDetailDialog()
              } else {
                this.$message({
                  type: 'error',
                  message: serviceResponse.msg
                })
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(postForm) {
      this.$refs[postForm].resetFields()
    },

    handShowDetailDialog(id) {
      if (id > 0) {
        this.isEdit = true
        this.editId = id
        this.showRecord(id)
      } else {
        this.isEdit = false
        this.handleCreateRecord()
        this.postForm = Object.assign({}, defaultForm)
      }

      this.dialogTableVisible = true
    },
    handleCloseDetailDialog() {
      this.resetForm('postForm')
      this.editId = 0
      this.$emit('indexRecord')
      this.dialogTableVisible = false
    }
  }

}
</script>
